import API from "../../api/api";
import IconFont7 from "../../util/autoIcon/top";
import {Avatar, Button, Form, List, Popconfirm, Table} from "antd";
import React from "react";
import './ArticleContent.css'
import {flushSubscribeList} from "../../store/action";

let config = require('../../util/config').config

export default class ArticleContent extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            station:null,
            name:null,
            applyStartTime:null,
            applyEndTime:null,
            startTime:null,
            endTime:null,
            content:null,
            attach:[]
        }
        console.log("component indexManage articleContent props",this.props)
        this.storeFresh(this.props)
    }

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        this.storeFresh(nextProps)
    }

    storeFresh=(props)=>{

        //    用户页面通过/eip/file/activity（或notice）/:id 路由进该组件
        if(props.match.params.type=="notice"){
            this.initDataForActivityAndNotice(API.getNoticeContent(props.match.params.id));
            let item = {title:this.state.name,type:props.match.params.type,id:props.match.params.id};
            API.userAccessLog(item);
        }else if(props.match.params.type=="activity"){
            this.initDataForActivityAndNotice(API.getActivityContent(props.match.params.id));
            let item = {title:this.state.name,type:props.match.params.type,id:props.match.params.id};
            API.userAccessLog(item);
        //    后台管理通过/eip/activity-manage-content/:id 路由进该组件
        }else if(props.match.path=="/eip/activity-manage-content/:id"){
            this.initDataForActivityAndNotice(API.getActivityContent(props.match.params.id));
        }else if(props.match.path=="/eip/notice-manage-content/:id"){
            this.initDataForActivityAndNotice(API.getNoticeContent(props.match.params.id));
        }
        else{
            let type = null;
            if(props.match.params.type=="article"){
                type = config.article
                let item = {title:this.state.name,type:props.match.params.type,id:props.match.params.id};
                API.userAccessLog(item);
            }else type = config.file
            this.initDataForFileAndArticle(API.getFileContent(props.match.params.id,type),props.match.params.type);
        }
    }

    //activity 和 notice的数据获取后要切换下格式来匹配该组件
    initDataForActivityAndNotice(data){
        this.state.station = data.station
        this.state.name = data.name
        this.state.applyStartTime = data.applyStartTime
        this.state.applyEndTime = data.applyEndTime
        this.state.startTime = data.startTime
        this.state.endTime = data.endTime
        this.state.content = data.content
        if(data.attachUrls==null || data.attachUrls==undefined){
            data.attachUrls=[]
        }
        for(let i=0;i<data.attachUrls.length;i++){
            this.state.attach.push({
                attachUrl:data.attachUrls[i],
                attachName:data.attachNames[i]
            })
        }
    }

    //file和article的数据获取后要切换下格式来匹配该组件
    initDataForFileAndArticle(data,type){
        if(type=="article"){
            this.state.name = data.articleName
            this.state.content = data.articleContent;
            for(let i=0;i<data.urls.length;i++){
                this.state.attach.push({
                    attachUrl:data.urls[i].response,
                    attachName:data.urls[i].name
                })
            }
        }else {
            for(let i=0;i<data.length;i++){
                this.state.attach.push({
                    attachUrl:data[i].response,
                    attachName:data[i].name
                })
            }
        }
    }

    changeSubscribeStatus(value){
        let type = value.type
        let id = value.id
        let status
        if(sessionStorage.getItem("subStatus")=="true"){
            status = API.cancelSub({type:type,id:id})
        }else if(sessionStorage.getItem("subStatus")=="false"){
            status = API.submitSub({type:type,id:id})
        }
        if(status=="ok"){
            this.setState({})
        }
    }

    render() {
        console.log("Component IndexManage ArticleContent",this.props)
        let subStatus;
        if(this.props.match.params.type=="article"){
            subStatus = API.subStatus(this.props.match.params)
            sessionStorage.setItem("subStatus",subStatus)
        }
        return(
            <div style={{listStyle: "display",marginRight:"2rem"}}>
                {this.props.match.params.type=="file"
                    ?
                    null
                    :
                    <>
                        <div className="article-content" style={{textAlign:"center"}}>
                            <h1 dangerouslySetInnerHTML={{__html:this.state.name}} style={{maxHeight:"37.5rem",overflow:"auto",marginBottom:"1rem",fontSize:"20px"}}></h1>
                        </div>
                        {
                            this.props.match.path == "/eip/activity-manage-content/:id" || this.props.match.url.indexOf("/eip/file/activity")>=0?
                            <div style={{color:"blue"}}  >
                                {
                                    this.state.applyStartTime == "" ? null : <><span>报名开始时间：</span><span dangerouslySetInnerHTML = {{ __html: this.state.applyStartTime}} /><br /></>
                                }
                                {
                                    this.state.applyEndTime == "" ? null : <><span>报名结束时间：</span><span dangerouslySetInnerHTML = {{ __html: this.state.applyEndTime}} /><br /></>
                                }
                                {
                                    this.state.startTime == "" ? null : <><span>活动开始时间：</span><span dangerouslySetInnerHTML = {{ __html: this.state.startTime}} /><br /></>
                                }
                                {
                                    this.state.endTime == "" ? null :<><span>活动结束时间：</span><span dangerouslySetInnerHTML = {{ __html: this.state.endTime}} /><br /></>
                                }
                                {
                                    this.state.station == "" ? null :<><span>活动进行地点：</span><span dangerouslySetInnerHTML = {{ __html: this.state.station}} /><br /></>
                                }
                            </div>
                            :
                                this.props.match.params.type=="article"?
                                    <Form layout={"inline"}
                                    >
                                        <Form.Item
                                            name="subscribe"
                                            label="訂閱管理"
                                            style={{display:"inline"}}
                                        >
                                            <Button type={subStatus=="true"?"danger":"primary"} onClick={()=>{this.changeSubscribeStatus(this.props.match.params)}}>
                                                {subStatus=="true"?"取消訂閱":"訂閱"}
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                    :
                                    null
                        }
                        <p className="article-content" style={{marginTop:"1rem"}} dangerouslySetInnerHTML = {{ __html: this.state.content}} />
                        {/*<div dangerouslySetInnerHTML={{__html:this.state.content}} style={{maxHeight:"37.5rem",overflow:"auto",marginBottom:"1rem"}} />*/}
                    </>

                }
                {
                    this.state.attach.length>0?
                        <List
                            itemLayout="horizontal"
                            dataSource={this.state.attach}
                            renderItem={item => (
                                <List.Item>
                                    <List.Item.Meta
                                        avatar={<Avatar src={item.attachUrl} />}
                                        title={<a target="_blank" href={item.attachUrl}>{item.attachName}</a>}
                                    />
                                </List.Item>
                            )}
                        />
                        :
                        null
                }

            </div>
        )
    }
}
